/*
 * @Author: luoqi
 * @Date: 2022-03-27 15:09:56
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 16:37:11
 * @Description: 
 */
import React, { useState ,useEffect} from 'react';
import { Form, Input, Button, Select, Space, Card, Table, Tag , Popconfirm, message} from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';

import Adduser from './AddUser';
import Modifyuser from './ModifyUser';

import axios from '../../utils/axios'
import qs from 'qs'

export default function User() {
  let [pag, setPag] = useState({ defaultCurrent: 1,  pageSize: 5 ,current:1,showTotal:total => `共 ${total} 条`,onChange:changePage})
  let [form]=Form.useForm()
  let [data, setData] = useState()
  //用于触发重新渲染页面
  let [num, setNum] = useState(0)
  //搜索或全部
  let [isAll,setIsAll]=useState(true)
  //页数更改时
  function changePage(page, pageSize) {
    console.log(page, pageSize);
    setPag({ ...pag, current: page, pageSize })
  }

  //页面加载完毕调接口，页数更改时调接口
  useEffect(() => {

    if(isAll){
      axios({
      url: '/user/select',
      method: 'post',
      data: qs.stringify({
        page: pag.current,
        size: pag.pageSize,
        nickName:null,
        phone:null
      })
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(true)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        if (num == 1) {
          setNum(0)
        }

      }
    })
    }else{
      form.submit()
    }
    
  }, [pag.current, num,isAll])
  const onFinish = (values) => {
    console.log('Success:', values);
    axios({
      url: '/user/select',
      method: 'post',
      data: qs.stringify({
        page: pag.current,
        size: pag.pageSize,
        nickName:values.nickname,
        phone:values.phone
      })
    }).then(res => {
      console.log(res);
      if (res.code === '200') {
        setIsAll(true)
        //给每一个加key
        setData(res.data.map(item => ({ ...item, key: item.id })))
        setPag({ ...pag, total: res.count })
        if (num == 1) {
          setNum(0)
        }

      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }
    //删除用户
    function confirm(obj) {
      console.log(obj);
      axios({
        url: '/user/delete',
        method: 'post',
        data: qs.stringify({ ids: obj.id.toString() })
      }).then(res => {
        console.log(res);
        if (res.code == '200') {
          message.success('删除成功');
          setNum(1)
        }
      })
    }
    
    function cancel(e) {
      console.log(e);
      message.error('Click on No');
    }
    const columns = [
      {
        title: '用户头像',
        dataIndex: 'headImg',
        key: 'headImg',
        render: text => <img style={{width:'50px',height:'50px'}} src={text} alt="" />
      },
      {
        title: '用户昵称',
        dataIndex: 'nickname',
        key: 'nickname',
      },
      {
        title: '用户手机号',
        dataIndex: 'phone',
        key: 'phone',
      },
      {
        title: '用户职业',
        dataIndex: 'occupation',
        key: 'occupation',
      },
      {
        title: '用户年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <Space size="middle">
            <Modifyuser data={record} setNum={setNum}/>
            <Popconfirm
                  title="确定要删除该疾病吗?"
                  onConfirm={()=>confirm(record)}
                  onCancel={cancel}
                  okText="确定"
                  cancelText="取消"
                >
                <Button type="primary" ghost>删除</Button>  
                </Popconfirm>
            
          </Space>
        ),
      },
    ];
  return (
    <div>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Space>
          <Form.Item
            label="用户昵称"
            name="nickname"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="用户手机号"
            name="phone"
          >
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType='submit' icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Adduser setNum={setNum}/>
          </Form.Item>
        </Space>
      </Form>
      <Table columns={columns} dataSource={data} pagination={pag} />
    </div>
  );
}
